<template>
	<div style="padding-top: 20px;">
		<scroll-view scroll-y="true" :style="{height: safeHeight - 100 + 'px'}">
			<!-- 如果显示类型是1，就是显示品牌、价格、商品匹数…… -->
			<!-- 如果显示类型是2，就是显示某一个人的全部选项 -->
			<section v-show="nowShowType == 1">
				<div class="f_grid" v-for="(item, index) in filters" :key="item.fieldName">
					<div class="t-box">
						{{item.fieldNameDesc}}
					</div>

					<!-- 选项块 -->
					<div class="c-box">
						<!-- 循环五个选项 -->
						<span v-for="c in fiveChoice(item.values)" :key="c.value"
							:class="{choosed: item.fieldNameDesc == '价格' ? myCfPrice == c.value : myCfArr.includes(c.value)}"
							@click="spanClickHandler(c.value, item.fieldNameDesc)">
							{{c.valueDesc}}
						</span>

						<!-- 全部选项按钮 -->
						<span v-show="item.values.length > 5" @click="showAllChoise(index)">
							全部选项 &gt;
						</span>

						<!-- 补齐3的倍数，这样适配justify-content，不留大空 -->
						<span v-for="i in padChoice(item.values)" :key="i" style="visibility: hidden;">
							我是补的
						</span>
					</div>
				</div>
			</section>

			<section v-if="nowShowType == 2" class="section2">
				<!-- 根据是不是价格，决定是单选按钮，还是多选按钮 -->
				<div v-if="filters[nowAllChoiceIndex].fieldNameDesc == '价格'">
					<van-radio-group :value="nowAllChoicePriceChoosed" @change="changeRadioHandler($event)">
						<van-radio name="a" v-for="item in filters[nowAllChoiceIndex].values" :key="item.value"
							:name="item.value">
							{{item.valueDesc}}
						</van-radio>
					</van-radio-group>
				</div>
				<div v-else>
					<van-checkbox-group :value="nowAllChoiceChoosed" @change="changeCheckBoxHandler($event)">
						<div style="padding: 4px 0;font-size: 13px;" v-for="item in filters[nowAllChoiceIndex].values">
							<van-checkbox :key="item.value"
								:name="item.value">
								{{item.valueDesc}}
							</van-checkbox>
						</div>
					</van-checkbox-group>
				</div>

			</section>
		</scroll-view>

		<section class="footer-bar">
			<div class="btn cancel" @click="cancelBtnHandler()">取消</div>
			<div class="btn ok" @click="okBtnHandler()">确定</div>
		</section>
	</div>
</template>

<script>
	export default {
		// 接收父组件传来的参数
		props: ['filters', 'cfArr', 'cfPrice', 'safeHeight'],
		// 数据
		data() {
			return {
				// 克隆传进来的cfArr数组
				myCfArr: [...this.cfArr],
				// 克隆价格
				myCfPrice: this.cfPrice,
				// 当前的显示模式
				nowShowType: 1,
				// 当前的“全部选项”是谁
				nowAllChoiceIndex: 0,
				// 在“全部选项”中，已经选择了谁
				nowAllChoiceChoosed: [],
				// 在“全部选项”中，已经选择什么价格范围
				nowAllChoicePriceChoosed: ''
			}
		},
		// 方法
		methods: {
			// 五个选项
			fiveChoice(values) {
				return values.slice(0, 5);
			},
			// 补齐选项，防止justify-content有大空
			// 这里没有找到什么规律，可以直接列出所有可能，分类讨论即可。前端在实际工作中，这种小聪明，很多的。
			padChoice(values) {
				if (values.length >= 6 || values.length == 3) return 0;
				if (values.length == 5 || values.length == 2) return 1;
				if (values.length == 4 || values.length == 1) return 2;
			},
			// 点击选项做的事情
			spanClickHandler(v, chinese) {
				// 看看是不是点击的是价格
				if (chinese == '价格') {
					// 判断如果已经是高亮了，那么就取消高亮
					if (this.myCfPrice == v) {
						this.myCfPrice = '';
					} else {
						// 如果不是高亮，就变为高亮
						this.myCfPrice = v;
					}
				} else {
					// 判断点击的这项是不是已经在数组中了，如果在，就删除
					if (this.myCfArr.includes(v)) {
						// 删filter改map
						this.myCfArr = this.myCfArr.filter(item => item != v);
					} else {
						// 加入
						this.myCfArr.push(v.toString());
					}
				}
			},
			// 当用户点击“全部选项”之后做的事情
			showAllChoise(index) {
				// 你点击的“全部选项”是几号，就让nowAllChoiceIndex值成为几。
				this.nowAllChoiceIndex = index;
				// 显示类型变为2，此时就能够切换到“全部选项”界面中。
				this.nowShowType = 2;
				// 让nowAllChoiceChoosed为此时的myCfArr，当然又要克隆，因为内部也有取消按钮
				this.nowAllChoiceChoosed = [...this.myCfArr];
				this.nowAllChoicePriceChoosed = this.myCfPrice;
			},
			// 改变“全部选项”中的复选框做的事情
			changeCheckBoxHandler(e) {
				this.nowAllChoiceChoosed = e.detail;
			},
			// 改变“全部选项”中的单选框做的事情
			changeRadioHandler(e) {
				this.nowAllChoicePriceChoosed = e.detail;
			},
			// 取消按钮
			cancelBtnHandler() {
				// 如果是“全部选项”中
				if (this.nowShowType == 2) {
					this.nowShowType = 1;
				} else {
					// 在外层，关闭弹出层
					this.$emit('closeDrawer');
				}
			},
			// 确定按钮
			okBtnHandler() {
				// 如果是“全部选项”中
				if (this.nowShowType == 2) {
					this.nowShowType = 1;
					// 覆盖
					this.myCfArr = this.nowAllChoiceChoosed;
					this.myCfPrice = this.nowAllChoicePriceChoosed;
				} else {
					// 在外层，关闭弹出层
					this.$emit('ok', {
						myCfArr: this.myCfArr,
						myCfPrice: this.myCfPrice
					});
				}
			}
		},
		watch: {
			// 特征值数组
			myCfArr(newValue) {
				console.log('myCfArr已经变为' + this.myCfArr);
			},
			myCfPrice(newValue) {
				console.log('myCfPrice已经变为' + this.myCfPrice);
			}
		}
	};
</script>

<style scoped>
	.f_grid {
		width: 95%;
		margin: 0 auto;
		border-bottom: 1px solid #d3d3d3;
		margin-bottom: 20px;
	}

	.f_grid .t-box {
		font-weight: bold;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.f_grid .c-box {
		/* 清除浮动 */
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.f_grid .c-box span {
		box-sizing: border-box;
		flex-basis: 30%;
		border: 1px solid #8d8d8d;
		height: 40px;
		font-size: 12px;
		margin-bottom: 10px;
		border-radius: 6px;
		line-height: 40px;
		text-align: center;
		/* 文字保持单行，不允许换行 */
		white-space: nowrap;
		/* 溢出省略号 */
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.f_grid .c-box span.choosed {
		background-color: orange;
		color: white;
	}

	.footer-bar {
		padding-top: 10px;
		display: flex;
		justify-content: space-around;
	}

	.footer-bar .btn {
		width: 40%;
		text-align: center;
		height: 50px;
		line-height: 50px;
		border-radius: 10px;
		font-size: 16px;
	}

	.footer-bar .btn.ok {
		background-color: #5de319;
	}

	.footer-bar .btn.cancel {
		background-color: #ece6eb;
	}
	.section2 {
		padding: 20px;
	}
	 
</style>
